<template>
  <el-dialog title="户型查看" v-model="visible" width="80%">
    <el-tabs type="border-card" v-show="dialogProps!.roomList.length !== 0"
      ><el-tab-pane v-for="(p, index) in (dialogProps as any).roomList" :key="index">
        <template #label>{{ (p as any).name }}</template>
        <div>
          <el-descriptions border :column="3">
            <el-descriptions-item label="面积">{{ p.area }}m²</el-descriptions-item>
            <el-descriptions-item label="物业用途">{{ p.propertyUse === 0 ? "住宅" : "商业" }}</el-descriptions-item>
            <el-descriptions-item label="销售状态"
              ><span
                class="px-8px py-4px cursor-pointer"
                :style="{ backgroundColor: p.sell_status.backColor, color: p.sell_status.textColor }"
                >{{ p.sell_status.name }}</span
              ></el-descriptions-item
            >
            <el-descriptions-item label="朝向">
              {{ forwardList.filter((e: any) => e.value === p.forward)[0].label }}
            </el-descriptions-item>
            <el-descriptions-item label="参考价">{{ p.referencePrice }}元/m²</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane></el-tabs
    >
    <el-empty description="暂无数据" v-show="dialogProps!.roomList.length === 0"></el-empty>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

const forwardList = reactive([
  { value: 1, label: "东" },
  { value: 2, label: "东南" },
  { value: 3, label: "南" },
  { value: 4, label: "西南" },
  { value: 5, label: "西" },
  { value: 6, label: "西北" },
  { value: 7, label: "北" },
  { value: 8, label: "东北" }
]);

const visible = ref(false);

interface DialogProps {
  roomList: any[];
}

const dialogProps = ref<DialogProps>();

const acceptParams = (params: any) => {
  dialogProps.value = params;
  console.log(dialogProps.value);
  visible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style></style>
